<template>
  <div class="home">
    <!-- mes控制输入框，rig里面的内容为图标样式，title为标题 bgc为背景颜色，如想透明就为0，否则为1
    mes不为空就不显示文本框   rig里面写图标的具体样式
    title为标题的内容 -->
    <Head mes="" rig="el-icon-search" title="" bgc="1" />
    <div class="content">
      <div class="content-top">
        <router-link :to="{ name: 'Home' }" tag="span">推荐</router-link>
        <router-link :to="{ name: 'Home1' }" tag="span">活动</router-link>
        <router-link :to="{ name: 'Home2' }" tag="span" class="bu"
          >游记</router-link
        >
      </div>
      <div class="mincont">
        <div v-for="(value,index) in school" :key="value.id" @click="hd(index)"> 
          <img :src="value.url" alt="" />
          <div>
            <div>
              <div>
                <span class="el-icon-view">140</span>
                <span class="el-icon-chat-dot-round">22</span>
                <span
                  @click.stop="qiehuan(index)"
                  :class="{ sc: value.state == 1 }"
                  class="el-icon-star-off"
                  >12</span
                >
              </div>
              <div>
                <span class="el-icon-share">分享</span>
              </div>
            </div>
            <span>{{ value.title }}</span>
            <div @click.stop="huan(index)">
              <img :src="value.imgurl" alt="" />
              <span>{{ value.username }}</span>
              <span>发布于</span>
            </div>
          </div>
          <div class="xian"></div>
        </div>
      </div>
    </div>
    <!-- num的数字表示在第几页，以控制颜色 -->
    <Foot num="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Head from "@/components/Head.vue";
import Foot from "@/components/Foot.vue";

export default {
  name: "Home",
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      activeName: "second",
      school: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    qiehuan(index) {
      console.log(this.school[index].state);
      this.school[index].state = !this.school[index].state;
      console.log(this.school[index].state);
      this.ajax({
        method: "post",
        url: "/updateSta",
        data: {
          id: this.school[index].id,
          state: this.school[index].state,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    hd(index) {
      this.$store.commit("gaiid", this.school[index].id);
      this.$router.push({ name: "Youji" });
    },
    huan(index){
      this.$store.commit("gaiid", this.school[index].id);
      this.$router.push({ name: "Geren" });
    }
  },
  mounted() {
    this.ajax({
      method: "get",
      url: "/queryAll",
    }).then((res) => {
      this.school = res.data;
    });
  },
};
</script>
<style lang="scss" scoped>
// .xian {
//   width: 100%;
//   height: 2px;
//   background-color: #000;
// }
.sc {
  color: orange;
}
.mincont {
  width: 100%;
  overflow: scroll;
  height: 725px;
  border-top: 1px solid rgba(190, 190, 190, 0.719);
  // padding: 10px;
  > div {
    width: 100%;
    //  margin: auto;
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 20px;
    // border-radius: 10px;
    border-bottom: 1px solid rgb(139, 139, 139);
    > img {
      width: 100%;
      border-radius: 10px 10px 0 0;
    }
    > div {
      border-radius: 0 0 10px 10px;
      margin-top: -5px;
      box-shadow: 0px 3px 3px #777676b9;
      > div {
        &:nth-of-type(1) {
          padding: 10px;
          display: flex;
          justify-content: space-between;
          color: gray;
          > div {
            &:nth-of-type(2) {
              > span {
                margin-right: 0;
              }
            }
            > span {
              margin-right: 30px;
            }
          }
        }
        &:nth-of-type(2) {
          margin-top: 10px;
          margin-left: 10px;
          display: flex;
          // justify-content: center;
          align-items: center;
          > span {
            font-size: 15px;
            margin-left: 8px;
            &:nth-of-type(2) {
              color: gray;
            }
          }
        }
        > img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-bottom: 10px;
        }
        // >span{
        //   margin-left: ;
        // }
      }
      > span {
        margin-left: 10px;
      }
    }
  }
}
.content-top {
  display: flex;
  justify-content: space-between;
  // margin-top: 10px;
  > span {
    width: calc(100% / 3);
    height: 45px;
    line-height: 45px;
    text-align: center;
    // &:hover{
    //   border-bottom: 1px solid rgb(15, 208, 241);
    // }
  }
}
.bu {
  border-bottom: 4px solid rgb(15, 208, 241);
}
</style>